<template>
  <el-col class="com_class">
    <el-col class="title">订单列表</el-col>
    <el-col style="padding-top: 10px">&nbsp;</el-col>
    <el-form
      :model="form"
      ref="form"
      :inline="true"
      size="mini"
      label-width="80px"
      class="forms"
    >
      <el-form-item label="查看分类">
        <el-select
          v-model="form.type"
          placeholder="请选择订单分类"
          @change="onSubmit"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="配送方式">
        <el-select
          v-model="form.delivery"
          placeholder="请选择配送方式"
          @change="onSubmit"
        >
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单编号">
        <el-input
          v-model="form.order_number"
          placeholder="请输入需要查询的订单编号"
          label
          @change="onSubmit"
        ></el-input>
      </el-form-item>
      <el-form-item label="收件人" v-if="form.delivery === 1">
        <el-input
          v-model="form.receive_user"
          placeholder="请输入收件人姓名"
          label
          @change="onSubmit"
        ></el-input>
      </el-form-item>
      <el-form-item label="退款订单">
        <el-select
          v-model="form.is_refund"
          placeholder="查询退款订单"
          @change="onSubmit"
        >
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="class_list"
      border
      stripe
      :summary-method="getSummaries"
      show-summary
      size="small"
    >
      <el-table-column type="index" width="30"></el-table-column>
      <el-table-column label="购买者" width="80">
        <template slot-scope="scope">{{
          scope.row.userInfo.nickName
        }}</template>
      </el-table-column>
      <el-table-column label="收件人" width="80">
        <template slot-scope="scope">{{ scope.row.receive_user }}</template>
      </el-table-column>
      <el-table-column
        v-for="col in columns"
        :prop="col.id"
        :key="col.id"
        :label="col.label"
        :width="col.width"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column label="是否退款" width="80">
        <template slot-scope="scope">
          <template v-if="scope.row.is_refund === 0">订单正常</template>
          <template v-else-if="scope.row.is_refund === 1">
            <span style="color: #48c23d">正在退款</span>
          </template>
          <template v-else-if="scope.row.is_refund === 2">
            <span style="color: red">退款成功</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="配送方式" width="80">
        <template slot-scope="scope">
          <template v-if="scope.row.delivery == 1">商家配送</template>
          <template v-if="scope.row.delivery == 2">用户自提</template>
        </template>
      </el-table-column>
      <el-table-column label="商品状态" width="80">
        <template slot-scope="scope">
          <template v-if="scope.row.pay_status == 1">待付款</template>
          <template v-if="scope.row.pay_status == 3">待发货</template>
          <template v-if="scope.row.pay_status == 4">待收货</template>
          <template v-if="scope.row.pay_status == 5">已完成</template>
        </template>
      </el-table-column>
      <el-table-column label="充值金额" width="80">
        <template slot-scope="scope">
          <template>￥{{ scope.row.recharge_money }}</template>
        </template>
      </el-table-column>
      <el-table-column label="剩余金额" width="80">
        <template slot-scope="scope">
          <template>￥{{ scope.row.userInfo.balance }}</template>
        </template>
      </el-table-column>
      <el-table-column label="开票状态" width="80">
        <template slot-scope="scope">
          <template v-if="scope.row.is_invoice == 1">正在开票</template>
          <template v-if="scope.row.is_invoice == 3">开票完成</template>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope" >
          <template>
            <el-button
              @click.native.prevent="editRow(scope.$index, scope.row)"
              type="danger"
              plain
              size="mini"
            >
              查看详情
              <i class="el-icon-search"></i>
            </el-button>
          </template>

          <template v-if="scope.row.pay_status == 3">
            <el-button
              @click.native.prevent="ship(scope.$index, scope.row)"
              type="primary"
              plain
              size="mini"
              v-if="scope.row.is_refund == 0"
            >
              发货
              <i class="el-icon-s-promotion"></i>
            </el-button>
          </template>

          <template v-if="scope.row.pay_status == 1">
            <el-button
              @click.native.prevent="order_money(scope.$index, scope.row)"
              type="primary"
              plain
              size="mini"
            >
              调价
              <i class="el-icon-edit-outline"></i>
            </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-col class="class_bottom">
      <!-- <el-button type="primary" @click="add_class" size="mini">添加地址</el-button> -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="15"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </el-col>
    <el-dialog
      title="订单详情"
      :visible.sync="addclass"
      width="450px"
      @close="end"
      :modal-append-to-body="false"
      class="order_detail"
    >
      <template>
        <template v-for="(item, index) in cotent_list">
          <el-col class="com_list" :key="index">
            <el-col tag="span" :span="5" class="imgs">
              <img :src="item.cover" alt="tu片" />
            </el-col>
            <el-col :span="19" class="rs">
              <el-col :span="18" class="item">{{ item.com_name }}</el-col>
              <el-col :span="6" class="item"
                >折扣&nbsp;&nbsp; {{ item.discount }}折</el-col
              >
              <el-col
                :span="18"
                class="item"
                style="color: red; padding-top: 10px"
                >￥{{ item.price }}</el-col
              >
              <el-col
                :span="6"
                class="item"
                style="color: red; padding-top: 10px"
                >X {{ item.com_num }} 件</el-col
              >
            </el-col>
          </el-col>
        </template>
        <el-col class="order_title">
          <span>收货人：</span>
          <strong>{{ com_user_name }}</strong>
        </el-col>
        <el-col class="order_title">
          <span>收货地址：</span>
          <strong>{{ com_address }}</strong>
        </el-col>
        <template v-if="orderdetalis.delivery == 1">
          <el-col class="order_title">
            <span>公司名称：</span>
            <strong>{{ company }}</strong>
          </el-col>
        </template>
        <template v-if="orderdetalis.delivery == 1">
          <el-col class="order_title">
            <span>联系电话：</span>
            <strong>{{ com_phone }}</strong>
          </el-col>
        </template>
        <template v-if="orderdetalis.delivery == 2">
          <el-col class="order_title">
            <span>联系电话：</span>
            <strong>{{ phone }}</strong>
          </el-col>
        </template>
        <el-col class="order_title">
          <el-col :span="16">
            <span>订单编号：</span>
            <strong>{{ orderdetalis.order_id }}</strong>
          </el-col>
          <el-col :span="8">
            <span>订单总价(元)：</span>
            <strong style="color: red">{{ orderdetalis.price }}</strong>
          </el-col>
        </el-col>
        <el-col class="order_title">
          <span>配送方式：</span>
          <strong>
            <template v-if="orderdetalis.delivery == 1">商家配送</template>
            <template v-else>上门自提</template>
          </strong>
        </el-col>
        <el-col class="order_title">
          <span>订单备注：</span>
          <strong>{{ orderdetalis.message }}</strong>
        </el-col>
        <span slot="footer">&nbsp;</span>
      </template>
    </el-dialog>
    <el-dialog
      title="物流信息"
      :visible.sync="dialogFormVisible"
      :modal-append-to-body="false"
      @close="end"
    >
      <el-form :model="logistics">
        <el-form-item label="物流名称" :label-width="formLabelWidth">
          <el-input v-model="logistics.logistics" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="快递单号" :label-width="formLabelWidth">
          <el-input v-model="logistics._number" autocomplete="off"></el-input>
        </el-form-item>

        <template v-if="orderStatus == '2'">
          <div class="upclass">
            <span>自提需要上传用户照片</span>
            <upimg @getpath="getpath" ref="upimg"></upimg>
          </div>
          <!-- <el-form-item label="用户自提需要上传提货者的照片">
            <br />
          </el-form-item>-->
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="shipu" thgis>确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="修改订单金额"
      :visible.sync="moneyVisible"
      :modal-append-to-body="false"
      @close="end"
    >
      <el-form :model="logistics">
        <el-form-item label="订单总价(元)" :label-width="formLabelWidth">
          <el-input v-model="money" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="调整后的价格" :label-width="formLabelWidth">
          <el-input v-model="editMoney" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="moneyVisible = false">取 消</el-button>
        <el-button type="primary" @click="update_order_money" thgis
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </el-col>
</template>
<script>
import upimg from "@/components/upimg";

export default {
  data() {
    return {
      orderStatus: "",
      dialogFormVisible: false,
      formLabelWidth: "120px",
      class_list: [],
      addclass: false,
      editclass: false,
      moneyVisible: false,
      total: 0,
      page: "",
      form: {
        type: 3,
        delivery: "",
        is_refund: "",
        order_number: "",
        receive_user: "",
      },
      columns: [
        {
          id: "created_at",
          label: "下单时间",
          width: "130px",
        },
        {
          id: "order_id",
          label: "订单编号",
        },
        {
          id: "logistics",
          label: "物流信息",
        },
        {
          id: "logistics_num",
          label: "物流号",
        },
        {
          id: "price",
          label: "商品总价",
          width: "80px",
        },
      ],
      options: [
        {
          value: 0,
          label: "全部",
        },
        {
          value: 1,
          label: "待付款",
        },
        {
          value: 3,
          label: "待发货",
        },
        {
          value: 4,
          label: "待收货",
        },
        {
          value: 5,
          label: "已完成订单",
        },
      ],
      options2: [
        {
          value: 1,
          label: "商家配送",
        },
        {
          value: 2,
          label: "用户自提",
        },
      ],
      options3: [
        {
          value: 0,
          label: "全部订单",
        },
        {
          value: 1,
          label: "退款订单",
        },
      ],
      orderdetalis: {},
      cotent_list: [],
      post_id: "",
      logistics: {
        //物流
        logistics: "",
        order_id: "",
        user_photo: "",
      },
      com_address: "", //地址
      company: "",
      com_user_name: "", //提货人
      com_phone: "",
      phone: "",
      money: "",
      editMoney: "",
    };
  },
  components: {
    upimg,
  },
  mounted() {
    this.getlist();
  },
  methods: {
    getpath(path) {
      this.logistics.user_photo = path;
    },
    async getlist() {
      //获取列表
      let data = {
        page: this.page,
        type: this.form.type,
        delivery: this.form.delivery,
        is_refund: this.form.is_refund,
        order_number: this.form.order_number,
        receive_user: this.form.receive_user,
      };
      let res = await this.$store.dispatch("order_list", data);
      if (!res.code) {
        this.class_list = res.data.data;
        this.total = res.data.total;
      }
    },
    onSubmit() {
      //   console.log(22);
      this.page = "";
      this.getlist();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.getlist(this.page);
    },
    async editRow(index, row) {
      //编辑
      this.addclass = true;
      this.editclass = true;
      let data = {
        order_id: row.id,
      };
      let res = await this.$store.dispatch("order_detail", data);
      //   console.log(res);
      if (!res.code) {
        this.orderdetalis = res.data;
        console.log(this.orderdetalis);
        if (res.data.delivery == 1) {
          this.com_address =
            this.orderdetalis.user_address.city +
            this.orderdetalis.user_address.address;
          this.com_user_name = this.orderdetalis.user_address.user_name;
          this.com_phone = this.orderdetalis.user_address.phone;
          this.company = this.orderdetalis.user_address.company || "";
        } else {
          this.com_address = this.orderdetalis.pick.address;
          this.com_user_name = this.orderdetalis.pick.name;
          this.phone = this.orderdetalis.pick.phone;
        }

        for (let i in res.data.content) {
          if (!isNaN(i)) {
            this.cotent_list.push(res.data.content[i]);
          }
        }
      }
    },
    async editsubimit() {
      let res = await this.$store.dispatch("add_pick_up", this.addform);
      if (!res.code) {
        this.$message({
          type: "success",
          message: "修改成功",
        });
        this.getlist();
        this.end();
      }
    },
    async deleteRow(index, row) {
      //删除
      let data = {
        pick_id: row.id,
      };
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteRowfn(data);
        })
        .catch(() => {});
    },
    async deleteRowfn(data) {
      let res = await this.$store.dispatch("delete_pick_up", data);
      if (!res.code) {
        this.$message({
          type: "success",
          message: "删除成功",
        });
        this.getlist();
      }
    },
    add_class() {
      this.addclass = true;
    },
    async addsubimit() {
      //提交对应的内容
      //   console.log(this.addform);
      let res = await this.$store.dispatch("add_pick_up", this.addform);
      if (res.code == 0) {
        this.addclass = false;
        this.$message({
          type: "success",
          message: "创建成功",
        });
        this.getlist();
        this.addform.name = "";
        this.addform.address = "";
      }
    },
    async ship(index, row) {
      // console.log(row);
      this.orderStatus = row.delivery;
      this.dialogFormVisible = true;
      this.logistics.order_id = row.order_id;
      this.post_id = row.id;
    },
    async shipu() {
      let data = {
        order_id: this.post_id,
        logistics: this.logistics.logistics,
        user_photo: this.logistics.user_photo,
        logistics_num: this.logistics._number, //快递单号
      };
      if (!this.logistics.logistics && this.logistics._number) {
        return false;
      } else {
        if (this.orderStatus == "2") {
          if (this.logistics.user_photo) {
            let res = await this.$store.dispatch("order_ship", data);
            if (!res.code) {
              this.$message({
                type: "success",
                message: "操作成功！",
              });
              this.dialogFormVisible = false;
            }
          } else {
            this.$message.error("请上传照片");
          }
        } else {
          let res = await this.$store.dispatch("order_ship", data);
          if (!res.code) {
            this.$message({
              type: "success",
              message: "操作成功！",
            });
            this.dialogFormVisible = false;
          }
        }
      }
    },
    async order_money(index, row) {
      this.money = row.price;
      this.moneyVisible = true;
      this.post_id = row.id;
    },
    async update_order_money() {
      let data = {
        order_id: this.post_id,
        money: this.editMoney,
      };
      let res = await this.$store.dispatch("update_order_money", data);
      if (!res.code) {
        this.$message({
          type: "success",
          message: "操作成功！",
        });
        this.moneyVisible = false;
        this.getlist(this.page);
      }
    },
    end() {
      this.addclass = false;
      this.cotent_list = [];
      this.editclass = false;
      this.getlist(this.page);
      this.logistics.logistics = "";
      this.logistics.logistics_num = "";
      this.logistics._number = "";
      this.moneyVisible = false;
      this.editMoney = "";
      this.money = "";
      //   this.addform.name = "";
      //   this.addform.address = "";
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        // console.log(column, index);
        const values = data.map((item) => Number(item[column.property]));
        if (column.label !== "订单编号") {
          if (!values.every((value) => isNaN(value))) {
            let all = 0;
            values.map((prev) => {
              all += prev * 100;
            });

            sums[index] = all / 100 + " 元";
          } else {
            sums[index] = " ";
          }
        }
      });

      return sums;
    },
  },
};
</script>
<style lang='scss'>
.forms {
  text-align: left;
}
.com_list {
  background-color: #f8f8f8;
  padding: 4px;
  .rs {
    text-align: left;
    .item {
      padding: 8px 2px;
    }
  }
  .imgs {
    width: 60px;
    height: 70px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.order_detail {
  .el-dialog__body {
    // display: inline-block;
    padding: 0;
    height: 550px;
    overflow-y: auto;
  }
}
.order_title {
  text-align: left;
  padding: 6px 2px;
}
.upclass {
  width: 100%;
  text-align: left;
  padding-left: 60px;
}
</style>